<template>
  <div class="main">
    <div class="serbox">
      <div class="inp"></div>
      <div class="btns">
        <el-button type="primary"
                   @click="openpop(1)">添加角色</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="roleName"
                         label="角色名">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='0'"
                  style="color:green">正常</span>
            <span v-if="scope.row.status=='1'"
                  style="color:red">停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="添加时间">
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-button @click="chodel(scope.row)"
                       type="text"
                       style="color:red"
                       size="small">删除</el-button>
            <el-button @click="openpop(scope.row)"
                       type="text"
                       size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination background
                     @current-change="changePage"
                     :current-page.sync="page"
                     :page-size="pageSize"
                     layout="total,prev,pager,next,jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="角色管理"
               :visible.sync="pop"
               width="45%">
      <el-form label-width="80px">
        <el-form-item label="角色名">
          <el-input v-model="roleName"
                    placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-tree :data="menuData"
                   ref="tree"
                   show-checkbox
                   node-key="id"
                   :default-checked-keys="defaultKeys"
                   :props="defaultProps">
          </el-tree>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submit">确 定</el-button>
          <el-button @click="pop=false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      roleName: "",
      menuData: [], // 菜单
      // {
      //   id: 1,
      //   label: '一级 1',
      //   children: [{
      //     id: 4,
      //     label: '二级 1-1'
      //   }]
      // }
      defaultKeys: [10, 11], // 默认选中。如果传父级id 是全选
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isAdd: true,
      roleId: ""
    }
  },
  mounted () {
    this.getlist();
    this.getmenulist();
  },
  methods: {
    // 获取角色列表
    getlist () {
      this.$postRequest("/shopuser/role/list", {
        pageNum: this.page,
        pageSize: this.pageSize,
        shopId: sessionStorage.getItem("shopId")
      }).then(res => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createTime = this.$util.gettime(new Date(res.rows[i].createTime));
        }
        this.tableData = res.rows;
      })
    },
    // 获取菜单列表
    getmenulist () {
      this.$postRequest("/shopuser/menu/list", {
        shopId: sessionStorage.getItem("shopId")
      }).then(res => {
        // console.log(res.data);
        var menuData = [];
        res.data.forEach(i => {
          var obj = {
            id: i.menuId,
            label: i.menuName,
            children: []
          };
          i.childList.forEach(j => {
            var smobj = {
              id: j.menuId,
              label: j.menuName
            }
            obj.children.push(smobj);
          })
          menuData.push(obj);
        })
        menuData.forEach(i => {
          if (i.id == 10 || i.id == 11) {
            i.disabled = true
          }
        })
        this.menuData = menuData;
      })
    },
    // 打开弹框
    openpop (e) {
      this.pop = true;
      if (e == 1) {
        this.isAdd = true;
        this.rsetPop();
      } else {
        this.roleId = e.roleId;
        this.isAdd = false;
        this.getinfo(e.roleId);
      }
    },
    // 获取角色详情
    getinfo (id) {
      this.$getRequest("/shopuser/role/" + id, {}).then(res => {
        this.roleName = res.data.roleName
        // 处理菜单
        var defaultKeys = [10, 11];
        res.data.menuList.forEach(i => {
          if (i.childList.length == 0) {
            defaultKeys.push(i.menuId)
          } else {
            i.childList.forEach(j => {
              defaultKeys.push(j.menuId)
            })
          }
        })
        this.$refs.tree.setCheckedKeys(defaultKeys)
      })
    },
    // 确定
    submit () {
      if (this.roleName == "") {
        this.$message.error("请输入角色名称")
      } else {
        if (this.isAdd) {
          this.addUser();
        } else {
          this.editUser();
        }
      }
    },
    // 添加角色
    addUser () {
      var menuList = [];
      for (var i = 0; i < this.$refs.tree.getCheckedKeys().length; i++) {
        var obj = {
          menuId: this.$refs.tree.getCheckedKeys()[i]
        }
        menuList.push(obj);
      }
      for (var i = 0; i < this.$refs.tree.getHalfCheckedKeys().length; i++) {
        var obj = {
          menuId: this.$refs.tree.getHalfCheckedKeys()[i]
        }
        menuList.push(obj);
      }
      this.$postRequest("/shopuser/role/add", {
        shopId: sessionStorage.getItem("shopId"),
        roleName: this.roleName,
        menuList: menuList
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功")
          this.pop = false;
          this.getlist();
        }
      })
      // console.log(this.$refs.tree.getCheckedKeys()); // 全选
      // console.log(this.$refs.tree.getHalfCheckedKeys());  // 半选
    },
    // 修改角色
    editUser () {
      var menuList = [];
      for (var i = 0; i < this.$refs.tree.getCheckedKeys().length; i++) {
        var obj = {
          menuId: this.$refs.tree.getCheckedKeys()[i]
        }
        menuList.push(obj);
      }
      for (var i = 0; i < this.$refs.tree.getHalfCheckedKeys().length; i++) {
        var obj = {
          menuId: this.$refs.tree.getHalfCheckedKeys()[i]
        }
        menuList.push(obj);
      }
      this.$postRequest("/shopuser/role/edit", {
        roleId: this.roleId,
        shopId: sessionStorage.getItem("shopId"),
        roleName: this.roleName,
        menuList: menuList
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功")
          this.pop = false;
          this.getlist();
        }
      })
    },
    // 清空弹框
    rsetPop () {
      this.roleName = "";
      this.$refs.tree.setCheckedKeys([10, 11])
    },
    // 分页
    changePage () {
      this.getlist();
    },
    // 删除
    chodel (e) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postRequest("/shopuser/role/remove", {
          shopId: sessionStorage.getItem("shopId"),
          roleId: e.roleId
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功!');
            this.getlist();
          }
        })
      }).catch(() => {
        this.$message.info("已取消删除")
      });
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary,
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner,
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-radio__input.is-checked + .el-radio__label,
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
/deep/ .el-textarea__inner {
  min-height: 60px !important;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  .inp {
    width: 200px;
    margin-left: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>